/**
 * 项目中可复用的逻辑
 *
 */
// 监控组件HomePannel
/**
     * 1.useIntersectionObserver函数的返回值是个对象,对象中的stop方法可以停止监控
     * 2.useIntersectionObserver(target:监控的dom对象或组件实例,
     * callback:被监控对象进入可视区域执行的回调函数,
     * options?:配置监控行为=>是ts语法,代表非必须穿
     * )
     * 需求: 当前组件进入可视区,发送请求获取数据
     * 根据useIntersectionObserver监控函数的回调中的isIntersecting的值判断实现
     *
     */
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
/**
 *
 * @param {*} apiCallback 页面中的请求方法 => 回调函数(进入可视区域执行)
 */
export function useObserve (apiCallback) {
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // 参数1是数组:结构出来的isIntersecting的值(boolean) => 用来判断组件是否进入可视区域
      console.log(isIntersecting ? '进入' : '离开')
      if (isIntersecting) {
        // 发请求
        apiCallback()
        // 发送完成停止请求
        stop()
      }
    },
    {
      threshold: 0 // 0~1区间 =>刚进入就加载设为0
    }
  )
  // 返回监控元素的target
  return { target }
}
